這篇來記錄如何製作客製化的 HeaderView，這篇是我在看過Jared Davidson 的影片經過一些自己的調整寫出來的。

這篇是使用另外建立一個 nib 檔案的方式客製化自己的 HeaderView。

1. 建立 UITableViewCell 的檔案

建立一個 subclass 是 UITableViewCell 的檔案，UITableViewCell 的好處是這樣我們可以確保它的寬度是跟手機一樣的

1. 將想要顯示的元件拉到 nib file 上，設定好 AutoLayout
2. 將那些元件拉 outlet 到檔案上，以便之後要做設定用

class HeaderView: UITableViewCell {
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var nickNameLabel: UILabel!
}

2. 填入 Header 的內容

在 TableViewController 裡覆寫 viewForHeaderInSection，讀取 nib 檔案，然後設定要顯示的內容。

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = Bundle.main.loadNibNamed("HeaderView", owner: self, options: nil)?.first as! HeaderView
    headerView.nameLabel.text = ""
    headerView.nickNameLabel.text = ""
    
    return headerView
}

3. 自訂 Header 的高度

如果要自訂 HeaderView 就一定要自訂 Header 的高度

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}

4. 讓每個 Header 顏色不一樣

為了要看到 HeaderView 從上面隱沒的情況，可以在 viewForHeaderInSection 裡面加入這段程式碼，這樣每個 Header 的顏色就會不一樣，就可以看到不同 HeaderView 的邊界。

let g = ((Float(section) + 1) * 30)/255
headerView.backgroundColor = UIColor.init(red: 100/255, green: CGFloat(g), blue: 100/255, alpha: 1)

原始碼：https://github.com/iOSBeginner/CustomHeaderView